<template>
  <div class="songtop">
      <ul>
          <li v-for="(item,index) in songsheet" :key="index" @click="send(item.id,item.name)">{{item.name}} </li>
         <!-- {{songsheet}} -->
      </ul>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    computed:mapState({
        songsheet:state=>state.song
    }),
    methods:{
        send(i,j){
            this.$router.push({
                path:'/songlistTop',
                query:{
                    id:i,
                    name:j
                }
            })
            console.log(i);
        }
    },
    created(){
        this.$store.dispatch('songsheet')
    }
}
</script>

<style lang="scss" scoped>
.songtop{
    margin-top: 140px;
    width: 1400px;
    margin: 140px auto;
    ul{
        width: 1000px;
        display: flex;
        margin: 0 auto;
        li{
           width: 120px;
           height: 40px;
           border: 1px solid #eee;
           line-height: 40px;
           text-align:center;
           margin-right: 10px;

           
           
        }
    }

}
</style>>